<template>
  <div class="hotcard">
    <el-card>
      <div slot="header" class="clearfix">
        <span>热门新闻资讯</span>
      </div>
      <el-carousel height="200px" direction="vertical">
        <el-carousel-item v-for="item in hotArticleList">
          <div class="hotcard-bottom">
            <div class="left">
              <span class="title">{{item.title}}</span>
              <span class="summary">{{item.summary}}</span>
              <div class="icon">
                <i class="el-icon-view"><span>{{item.viewCounts}}</span></i>
                <div style="margin-top:-3px;">
                <img src="@/assets/good.png" class="good"><span>{{item.goodCounts}}</span></img>
                </div>
              </div>
            </div>
            <div class="right">
              <img
                class="preimg"
                :src="item.preimg"
              />
            </div>
          </div>
        </el-carousel-item>
      </el-carousel>
    </el-card>
  </div>
</template>

<script>
export default {
  name: "HotArticle",
  props: {
    hotArticleList: Array,
  },
  data() {
    return {};
  },
};
</script>

<style scoped>
.hotcard {
  width: 700px;
}
.clearfix {
  font-weight: 700;
  line-height: 18px;
  color: rgba(0, 0, 0, 0.45);
  font-size: 16px;
  margin-bottom: 12px;
}
.hotcard-bottom {
  display: flex;
}
.left {
  width: 80%;
  display: flex;
  padding: 20px;
  /* text-align: center; */
  flex-direction: column;
  justify-content:space-between;
}
.right {
  width: 100%;
}
.title {
  font-size: 25px;
  background-image: -webkit-linear-gradient(
    left,
    rgb(124, 124, 129),
    #eee8e7c7 10%,
    #d1ccb7e8 20%,
    #b9d4cf 30%,
    #3498db 40%,
    #9b59b6 50%,
    #e74c3c 60%,
    #11cc00 70%,
    #eeff00a2 80%,
    #66ffff 90%,
    blue 100%
  );
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
  -webkit-background-size: 100% 100%;
  -webkit-animation: masked-animation 4s linear infinite;
}
.summary {
  line-height: 18px;
  color: #999;
}
.icon {
  display: flex;
  justify-content: space-between;
}
.good {
  width: 15px;
  height: 15px;
}
.preimg {
  width: 100%;
  height: 200px;
}
</style>